
<div style="POSITION: relative" id="content">
  <h3>easyUI为datagrid创建自定义视图</h3>
  <div id="article_content" class="article_content">
	<p>在不同的情况你可能需要更过灵活的布局为你的datagrid,对于用户来说Card View(卡片视图)是个不错的选择,这个工具可以迅速获取和显示数据在datagrid中,在datagrid的头部,</p>
<p>你可以排序数据,仅仅只是需要通过点击列的头部.这个教程将向你展示如何创建自定义(Card View)卡片视图.</p>
<p><img src="documentation/images/1344652640_1238.png" alt=""><br>
</p>
<p></p>
<div style="font-size:14px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left">
<a href="http://www.jeasyui.com/tutorial/datagrid/datagrid16_demo.html" target="_blank">查看 Demo</a></div>
<h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left">
创建Card View</h4>
<p>从默认的datagrid视图继承,是个不错的方法用来创建你的自定义视图,我们将要创建一个 card view为每行显示一些信息.
</p>
<p><pre name="code" class="javascript">var cardview = $.extend({}, $.fn.datagrid.defaults.view, {  
    renderRow: function(target, fields, frozen, rowIndex, rowData){  
        var cc = [];  
        cc.push('&lt;td colspan=' + fields.length + ' style=&quot;padding:10px 5px;border:0;&quot;&gt;');  
        if (!frozen){  
            cc.push('&lt;img src=&quot;images/' + rowData.itemid + '.gif&quot; style=&quot;height:150px;float:left&quot;&gt;');  
            cc.push('&lt;div style=&quot;float:left;margin-left:20px;&quot;&gt;');  
            for(var i=0; i&lt;fields.length; i++){  
                var copts = $(target).datagrid('getColumnOption', fields[i]);  
                cc.push('&lt;p&gt;&lt;span class=&quot;c-label&quot;&gt;' + copts.title + ':&lt;/span&gt; ' + rowData[fields[i]] + '&lt;/p&gt;');  
            }  
            cc.push('&lt;/div&gt;');  
        }  
        cc.push('&lt;/td&gt;');  
        return cc.join('');  
    }  
});  </pre></p>
<h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left">
创建DataGrid</h4>
现在我们使用视图创建<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">datagrid .</span>
<p></p>
<p><pre name="code" class="html">&lt;table id=&quot;tt&quot; style=&quot;width:500px;height:400px&quot;  
        title=&quot;DataGrid - CardView&quot; singleSelect=&quot;true&quot; fitColumns=&quot;true&quot; remoteSort=&quot;false&quot;  
        url=&quot;data/datagrid_data.json&quot;&gt;  
    &lt;thead&gt;  
        &lt;tr&gt;  
            &lt;th field=&quot;itemid&quot; width=&quot;80&quot; sortable=&quot;true&quot;&gt;Item ID&lt;/th&gt;  
            &lt;th field=&quot;listprice&quot; width=&quot;80&quot; sortable=&quot;true&quot;&gt;List Price&lt;/th&gt;  
            &lt;th field=&quot;unitcost&quot; width=&quot;80&quot; sortable=&quot;true&quot;&gt;Unit Cost&lt;/th&gt;  
            &lt;th field=&quot;attr1&quot; width=&quot;150&quot; sortable=&quot;true&quot;&gt;Attribute&lt;/th&gt;  
            &lt;th field=&quot;status&quot; width=&quot;60&quot; sortable=&quot;true&quot;&gt;Status&lt;/th&gt;  
        &lt;/tr&gt;  
    &lt;/thead&gt;  
&lt;/table&gt;    </pre><pre name="code" class="javascript">$('#tt').datagrid({  
    view: cardview  
}); </pre>注意:那个我们设置的<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">view属性和它的&#20540;为我们的<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">&nbsp;card
 view.</span></span></p>
<h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left">
下载 EasyUI 示例代码:</h4>
<div style="font-size:14px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left; padding-left:50px">
<a href="http://www.jeasyui.com/tutorial/datagrid/downloads/easyui-datagrid16-demo.zip" target="_blank" class="download-link" style="color:rgb(0,0,255)">easyui-datagrid-demo.zip</a></div>

  </div>
</div>
<SCRIPT type=text/javascript>
	dp.SyntaxHighlighter.ClipboardSwf = 'documentation/js/clipboard.swf'/*tpa=http://jeasyui.com/SyntaxHighlighter/Scripts/clipboard.swf*/;
	dp.SyntaxHighlighter.HighlightAll('code');
</SCRIPT>